<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>已生成一个1~100的随机数:</h3>
<input type="text" placeholder="请输入你猜的数字" id="id1">
<button onclick="calc()">点我验证</button>
<h3>小提示: <span></span> </h3>

<script>
    //Math.random是随机生成[0,1)之间的随机小数 *100 就是[0,100)=[1,101)
    let n = parseInt(Math.random()*100)+1
    console.log('打个小抄:'+n)
    var count = 0 ;
    function calc() {
        //1.获取用户在输入框中的数字
        let n1 = document.getElementById('id1').value;

        if(!/^\d+$/.test(n1)){
            alert('请输入数字!');
            return;
        }
        //获取用来显示结果的span元素
        let spanE = document.querySelector('span');
        count++;

        if (n1 > n) {
            spanE.innerHTML = '猜大了';
        } else if (n1 < n) {
            spanE.innerHTML = '猜小了';
        } else {
            spanE.innerHTML = '恭喜你用了' + count + '次就猜对了！';
        }
    }
</script>
</body>
</html>